<template>
	<view class="greyBox " v-if="ruleForm">
		<view class="details marTop_0 padTop_20">
			<view class="orderInfo">
				<view class="pic">
					<img src="https://supply.zhongyimotor.com/upload/applet/pic_thumbnail@2x.png" alt="" />
				</view>
				<view class="info">
					<view class="name">{{ruleForm.deliveryList.productInfo}}</view>
					<view class="num">x{{ruleForm.deliveryList.productAmount}}</view>
				</view>
			</view>
			<view class="item">
				<view class="top ">
					<view class="title ">发货信息</view>
				</view>
				<view class="content">
					<view class="dataCell">
						<view class="title">发货单号</view>
						<view class="data">{{ ruleForm.deliveryList.orderId }}</view>
					</view>
					<view class="dataCell">
						<view class="title">出口申请号</view>
						<view class="data">{{ ruleForm.deliveryList.carOutApplyId }}</view>
					</view>
				</view>
				<view class="content u-border-top">
					<view class="dataCell">
						<view class="title">买家名称</view>
						<view class="data">{{ruleForm.orderList.buyerName}}</view>
					</view>
					<view class="dataCell">
						<view class="title">启运港</view>
						<view class="data">{{ ruleForm.deliveryList.startHarborName }}</view>
					</view>
					<view class="dataCell">
						<view class="title">成交方式</view>
						<view class="data">{{ruleForm.orderList.tradeMode}}</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="top ">
					<view class="title ">发货车辆</view>
					<view class="right ">共计{{ruleForm.carList.length}}台</view>
				</view>
				<view class="content">
					<view class="dataCell" v-for="(item,index) in ruleForm.carList" :key="index">
						<view class="title">车架号</view>
						<view class="data">{{item.vin}}</view>
					</view>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import moment from "moment"
	export default {

		data() {
			return {
				ruleForm:null
			}
		},
		async onLoad(options) {
			const res = await this.$api.getDeliveryById(options)
			this.ruleForm = res.result
		},
		onShow() {
			let that = this
		},
		onBackPress() {

		},
		methods: {

		}
	};
</script>

<style scoped lang="scss">
	.orderInfo {
		border-radius: 16rpx;
		display: flex;
		background: #FFF;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.pic {
			height: 120rpx;
			width: 160rpx;
			line-height: 0;
		}

		.info {
			padding: 14rpx 0;
			margin-left: 20rpx;

			.name {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #202020;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}

			.num {
				font-size: 26rpx;
				font-family: Helvetica;
				color: #919191;
				line-height: 32rpx;
			}
		}
	}

	.details {
		.item {
			.right {
				width: 108rpx;
				height: 42rpx;
				background: rgba(15, 189, 127, 0.07);
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #0FBD7F;
				line-height: 42rpx;
				text-align: center;
				margin-top: 28rpx;
			}
		}
	}
</style>